<template>
    <div>
      <!-- <p><el-button type="primary" @click="">管理</el-button>
      </p> -->
      
        <el-tabs v-model="activeName" @tab-click="handleClick" @tab-remove="removeTab" >
            <el-tab-pane v-for="type,index in typeList" :label="type.name" :key="type.id" :name="type.id" :closable="type.name !== '默认分类' && isManage" >
                <imgsList :data="list" :isManage="isManage" ref="list1" v-loading="loading"></imgsList>
                <div class="foot_container">  
                    <el-pagination
                        v-if="page.totalPage"
                        :page-count="page.totalPage"
                        style="display:inline-block;"
                        background
                        layout="prev, pager, next"
                        @current-change="currentChange"
                    ></el-pagination>
                    <el-button type="primary" class="btn" round @click="selectThisImg('list1',index)">确 定</el-button>
                    <el-button type="primary" plain class="btn" round @click="close">取 消</el-button>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- <div v-else>
            <div style="border-bottom:2px solid #ddd;height:40px;margin:0 0 15px">
                <p style="text-align:right">
                    <span v-show="!isDelete">
                        <el-button type="primary" @click="isDelete = true">管理</el-button>
                        <el-button type="primary" @click="isAddMenu = true">添加分类</el-button>
                    </span>
                    <span v-show="isDelete">
                        <el-button type="text" @click>移除已选</el-button>
                        <el-button type="text" @click>取消已选</el-button>
                        <el-button type="text" @click="isDelete = false">取消</el-button>
                    </span>
                </p>
            </div>
            <imgsList :data="list" :isDelete="isDelete" ref="list2"></imgsList>
            <div class="foot_container">
                <el-pagination
                    v-if="page.totalPage"
                    :page-count="page.totalPage"
                    style="display:inline-block;"
                    background
                    layout="prev, pager, next"
                    @current-change="currentChange"
                ></el-pagination>
                <el-button type="primary" class="btn" round @click="selectThisImg('list2')">确 定</el-button>
                <el-button type="primary" plain class="btn" round @click="close">取 消</el-button>
            </div>
        </div> -->
    
        
    </div>
</template>

<script>
import imgsList from './imgsList';
export default {
    components: {
        imgsList,
    },
    props: {
        typeList: {
            type: Array,
            default: () => [{}],
            required: true,
        },
        list: {
            type: Array,
            default: () => [],
            required: true,
        },
        page: {
            type: Object,
            default: () => {},
            required: true,
        },
        loading:{
          type:Boolean,
          default:false
        },
        isManage:{
          type:Boolean,
          default:false
        },
    },
    data() {
        return {
            activeName:
                (this.typeList && this.typeList[0] && this.typeList[0].id) ||
                '',
            isDelete: false,
           
        };
    },
    watch: {
        isDelete(newValue, oldValue) {
            console.log('11newValue :', newValue);
        },
        list(n, v) {
            const { pageIndex, pageSize, totalPage } = n;
        },
    },
    methods: {
      removeTab(tab){
        var removeTab = this.typeList.find(item=>{
          return item.id === tab
        })
        this.$confirm("确定删除此分类？该分类下的所有图片将被删除！","提示",{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(()=>{
           this.$api.get("/folder/del",{id:removeTab.id},res=>{
              this.$message.success("删除成功")
              this.$emit("delFolder",removeTab.id)
              // 重新获取图片列表
            },err=>{
              this.$message.error("删除失败")
            })
        }).catch(()=>{

        })
      },
       
        handleClick(tab) {
            this.$emit('handleClick', tab);
        },
        currentChange(page) {
            this.$emit("pageChange",page);
        },
        selectThisImg(ref,index) {
            var curImgId = this.$refs[ref][index].currentSelectId;
            var cutImg = this.$refs[ref][index].currentSelect;
            if (curImgId && cutImg) {
                this.$emit('selected', cutImg);
                this.$refs[ref][index].clearSelcted();
                this.close();
            } else {
                this.$message.error('还没有选择哦！');
            }
        },
        close() {
            this.$emit('close');
        },
    },
};
</script>

<style lang="scss" scoped>
.foot_container {
    text-align: center;
    padding: 10px 0;
    border-top:2px solid #E4E7ED;
    .btn {
        float: right;
        margin-right: 6px;
    }
}
</style>